<template>
	<view class="container">
		<!-- 基地图片展示 -->
		<image :src="baseImage" alt="基地图片" class="base-image"></image>
		<view class="base-info">
			<text class="price">￥{{ basePrice }} 起</text>
			<view class="base-title">{{ baseTitle }}</view>
			<view class="base-description">{{ baseDescription }}</view>
			<view class="base-location">{{ baseLocation }}</view>
		</view>

		<!-- 土地选择 -->
		<view class="land-selection">
			<view class="land-status">
				<!-- 遍历地块数据，根据地块状态显示不同的样式 -->
				<view v-for="(land, index) in lands" :key="index" class="land-block" :class="land.status"
					@click="selectLand(land.id)">
					<text>{{ land.area }} 平方米</text>
					<text>{{ land.id }}</text>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<button class="rent-button" @click="rentLand">立即租赁</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 创建一个响应式变量来存储 landId
	const landId = ref(null);

	onMounted(() => {
		// 获取当前页面实例
		const pages = getCurrentPages();
		// 获取上一页id
		const currentPage = pages[pages.length - 1];

		// 获取页面参数
		if (currentPage && currentPage.options) {
			landId.value = currentPage.options.id;
			console.log('Land ID:', landId.value);
			// 调用你想要的方法，并传入 id
		    // 传入数据
			// fetchLandDetail(landId.value);
		}
	});
	// 基地数据：用于存储基地的基本信息，包括图片、价格、标题、描述和地址
	const baseImage = ref('/static/base-image.jpg'); // 基地图片
	const basePrice = ref(0.00); // 起始价格
	const baseTitle = ref('大棚蔬菜基地'); // 基地标题
	const baseDescription = ref('测试地块，仅作测试使用，不提供任何实物和服务。'); // 基地描述
	const baseLocation = ref('重庆市 市辖区渝南区'); // 基地位置



	// 土地数据：用于存储地块的信息，包括地块的 ID、面积和状态
	const lands = ref([{
			id: 1,
			area: 10,
			status: 'available'
		}, // 可选地块
		{
			id: 2,
			area: 10,
			status: 'selected'
		}, // 已选地块
		{
			id: 3,
			area: 10,
			status: 'rented'
		}, // 已租地块
		// 可根据需求添加更多地块
	]);

	// 方法：选择地块
	// 用户点击地块时调用此方法，用于切换地块的状态（例如从可选到选中，或取消选中）
	const selectLand = (id) => {
		const land = lands.value.find((l) => l.id === id); // 查找用户点击的地块
		if (land.status === 'available') {
			land.status = 'selected'; // 如果地块是可选的，则标记为已选
		} else if (land.status === 'selected') {
			land.status = 'available'; // 如果地块是已选的，则取消选中，恢复为可选状态
		}
	};

	// 方法：租赁地块
	// 用户点击“立即租赁”按钮时调用此方法，提交租赁订单
	const rentLand = () => {
		const selectedLands = lands.value.filter((l) => l.status === 'selected'); // 获取所有选中的地块
		if (selectedLands.length === 0) {
			console.error('请选择至少一个地块进行租赁'); // 如果没有选中任何地块，提示用户
			return;
		}
		console.log('租赁地块:', selectedLands); // 输出选中的地块，实际应用中可以替换为 API 请求逻辑
	};
</script>

<style scoped>
	/* 页面整体容器样式 */
	.container {
		padding: 16px;
	}

	/* 基地图片样式 */
	.base-image {
		width: 100%;
		height: 200px;
		object-fit: cover;
		/* 确保图片保持比例填充容器 */
	}

	/* 基地信息展示样式 */
	.base-info {
		margin: 16px 0;
	}

	.price {
		font-size: 20px;
		color: red;
		font-weight: bold;
	}

	.base-title {
		font-size: 18px;
		margin-top: 8px;
		font-weight: bold;
	}

	.base-description {
		color: #666;
		margin-top: 4px;
	}

	.base-location {
		color: #666;
		margin-top: 4px;
	}

	/* 土地选择区域样式 */
	.land-selection {
		margin: 16px 0;
	}

	.land-status {
		display: flex;
		flex-wrap: wrap;
	}

	/* 地块块状元素样式 */
	.land-block {
		width: 30%;
		padding: 8px;
		margin: 8px;
		background: #f0f0f0;
		text-align: center;
		cursor: pointer;
		/* 鼠标悬停时变为手形，提示可以点击 */
		border-radius: 5px;
	}

	/* 可选地块样式 */
	.land-block.available {
		background: #e0ffe0;
	}

	/* 已选地块样式 */
	.land-block.selected {
		background: #ffe0b3;
	}

	/* 已租地块样式 */
	.land-block.rented {
		background: #ccc;
	}

	/* 底部租赁按钮样式 */
	.footer {
		margin-top: 16px;
	}

	.rent-button {
		width: 100%;
		background: #6bc493;
		color: #fff;
		padding: 12px;
		text-align: center;
		font-size: 18px;
		border: none;
		border-radius: 5px;
	}
</style>